<template>
    <div>
      <!-- 面包屑 -->
      <div class="breadNav" style="margin: 20px 0 20px 20px;">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened" >积分商城</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">商品列表</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">修改商品</el-breadcrumb-item>
        </el-breadcrumb>  
      </div>
      <!-- 返回 -->
      <el-page-header @back="goBack" :content="title"></el-page-header>
      <!-- 修改商品 表单 -->
      <div class="x_addGoods">
        <!-- 必填带星号 -->
        <el-form :model="xsldata"  label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品名称:" prop="name">
            <el-input v-model="xsldata.text" placeholder="输入商品名称"></el-input>
          </el-form-item>
        </el-form>
        <!-- 不带星号 -->
        <div class="x_noStar">
          <el-form ref="form" :model="xsldata"  label-width="80px">
            <el-form-item label="简略标题:">
              <el-input  v-model="xsldata.title" placeholder="输入标题"></el-input>
            </el-form-item>
            <el-form-item label="排序:">
              <el-col :span="11">
                <el-input v-model="xsldata.sort" placeholder="请输入" style="width: 60%;"></el-input>
              </el-col>
              <el-col class="line" :span="2" style="padding-left:20px;font-size:14px;">库存:</el-col>
              <el-col :span="11">
                <el-input v-model="xsldata.store" placeholder="请输入" style="width: 60%;"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="净重:">
              <el-col :span="11">
                <el-input v-model="xsldata.kilo" placeholder="请输入" style="width: 60%;"></el-input>
              </el-col>
              <el-col class="line" :span="2" style="padding-left:20px;font-size:14px;">品牌:</el-col>
              <el-col :span="11">
                <el-input v-model="xsldata.brand" placeholder="请输入" style="width: 60%;"></el-input> 
              </el-col>
            </el-form-item>
            <el-form-item label="关键词:">
              <el-input v-model="xsldata.keywords" placeholder="以逗号分开,最多5个"></el-input>
            </el-form-item>
            <el-form-item label="描述:">
              <el-input v-model="xsldata.description" placeholder="请输入商品介绍"></el-input>
            </el-form-item>
            <el-form-item label="药品价格:">
              <el-col :span="11">
                <el-input v-model="xsldata.mediPrice" placeholder="请输入(元)" style="width: 60%;"></el-input>
              </el-col>
              <el-col class="line" :span="2" style="padding-left:5px;font-size:10px;">所需积分:</el-col>
              <el-col :span="11">
                <el-input v-model="xsldata.needjur" placeholder="请输入(积分)" style="width: 60%;"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="出售数量:">
              <el-select v-model="xsldata.saleout">
                <el-option label="件" value="shanghai"></el-option>
                <el-option label="个" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图片上传">
              <!-- 图片上传 -->
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存并上架</el-button>
              <el-button type="second" @click="onSubmit" style="background:orange;">保存到库存</el-button>
              <el-button style="background:gray;">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { editListApi } from '../../../api';
  export default {
    // mounted(){
    //   console.log(this.$route.params.data)
    //   // this.xsldata = this.$route.params.data
    //   console.log(this.xsldata)
    // },
    data() {
      return {
        xsldata:[],
        title:"修改积分商品",
        // 添加 商品表单
        ruleForm: {
          name: '',
        },
        rules: {
            name: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
          },
        form: {
          name: '',
          region: ''
        },
        // 图片上传
        dialogImageUrl: '',
        dialogVisible: false,
      }
    },
    methods: {
      // 返回
      goBack() {
        console.log('go back')
        this.$router.push('/Integral')
      },
      // 添加商品 表单
      onSubmit() {
          console.log(this.xsldata)
          editListApi(this.xsldata).then((res) => {
            console.log(res)
            this.$router.push({
              name:'integral'
            })
          })
      },
      // 图片上传
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
    },
    created(){
      if(this.$route.params==undefined){
        this.$router.push('/integral')
      }else{
        console.log(this.$route.params.data)
        this.xsldata=this.$route.params.data
      }
      
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .x_addGoods {
    width: 800px;
    margin: 20px auto;
  }
  .x_noStar{
    margin-left:20px;
  }
  </style>